<template>
  <div>
    <a class="logo" href="javascript:void(0)">&nbsp;&nbsp;{{$t('m.title')}}</a>
    <div class="side"
         style="background-image: url('https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-4.jpg'); display: block;"></div>
    <div class="top">
      <div class="item feedback "><a data-bind="click: feedback" href="javascript:void(0)">{{$t('m.feedback')}}</a>
      </div>
      <div class="item language-entry" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <div>{{language}}&nbsp;
          <img src="https://qq-web-legacy.cdn-go.cn/zc.qq.com/9a0178b7/v3/img/down.png" id="down" style="">
          <img src="https://qq-web-legacy.cdn-go.cn/zc.qq.com/9a0178b7/v3/img/up.png" id="up" style="display: none;">
        </div>
        <ul id="ul-list" style="display: none;">
          <li class="animated animate__slideInDown"><a href="javascript:void(0)" @click="changeLangEvent()">简体中文</a>
          </li>
          <li class="animated animate__slideInDown"><a href="javascript:void(0)" @click="changeLangEvent()">English</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="main-wraper">
      <div class="main">
        <div class="form" autocomplete="off">
          <div>
            <div class="welcome">{{$t('m.registerTitle')}}</div>
            <div class="header">{{$t('m.line')}}🥇</div>
          </div>
          <template v-if="this.language === '简体中文'">
            <el-form :model="formLogin" :rules="ruleLogin" ref="formLogin" class="form">
              <el-form-item label=""
                            prop="nickName">
                <el-input :placeholder="$t('m.nickName')"
                          v-model="formLogin.nickName"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label=""
                            prop="password">
                <el-input :placeholder="$t('m.password')"
                          v-model="formLogin.password"
                          show-password></el-input>
              </el-form-item>
              <el-form-item label=""
                            prop="phone">
                <el-select v-model="value" placeholder="请选择" style="width: 20%">
                  <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
                <el-input :placeholder="$t('m.tel')"
                          v-model="formLogin.phone"
                          style="width: 80%"
                ></el-input>
              </el-form-item>
              <el-form-item label=""
                            prop="code">
                <el-input :placeholder="$t('m.code')"
                          v-model="formLogin.code"
                          style="width: 70%"
                ></el-input>
                <template v-if="isTimeOut === 0">
                  <el-button style="width: 30%" @click="send(60)" v-text="loginPhoneCodeMsg"></el-button>
                </template>
                <template v-else>
                  <el-button style="width: 30%" v-text="loginPhoneCodeMsg"></el-button>
                </template>
              </el-form-item>
              <div>
                <input type="submit" class="submit" :value="$t('m.signUpNow')" tabindex="8" @click=" loginSubmit()">
              </div>
            </el-form>
          </template>
          <template v-else>
            <el-form :model="formLogin" :rules="englishLoginRule" ref="formLogin" class="form">
              <el-form-item label=""
                            prop="nickName">
                <el-input :placeholder="$t('m.nickName')"
                          v-model="formLogin.nickName"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label=""
                            prop="password">
                <el-input :placeholder="$t('m.password')"
                          v-model="formLogin.password"
                          show-password></el-input>
              </el-form-item>
              <el-form-item label=""
                            prop="phone">
                <el-select v-model="value" placeholder="请选择" style="width: 20%">
                  <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
                <el-input :placeholder="$t('m.tel')"
                          v-model="formLogin.phone"
                          style="width: 80%"
                ></el-input>
              </el-form-item>
              <el-form-item label=""
                            prop="code">
                <el-input :placeholder="$t('m.code')"
                          v-model="formLogin.code"
                          style="width: 70%"
                ></el-input>
                <template v-if="isTimeOut === 0">
                  <el-button style="width: 30%" @click="send(60)" v-text="loginPhoneCodeMsg"></el-button>
                </template>
                <template v-else>
                  <el-button style="width: 30%" v-text="loginPhoneCodeMsg"></el-button>
                </template>
              </el-form-item>
              <div>
                <input type="submit" class="submit" :value="$t('m.signUpNow')" tabindex="8" @click=" loginSubmit()">
              </div>
            </el-form>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
  import { register,sendCode } from '@/api/userApi'

  export default {
    name: 'Register',
    data () {
      // 此处自定义校验手机号码js逻辑
      const usernameReg = /^[a-zA-Z0-9_-]{4,16}$/
      const CheckRequiredUsername = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空!!'))
        }
        if (!usernameReg.test(value)) {
          return callback(new Error('格式有误'))
        } else {
          return callback()
        }
      }
      return {
        isTimeOut: 0,
        language: '简体中文',
        loginPhoneCodeMsg: '点击获取验证码',
        loginTitleItems: [
          {
            id: 1,
            title: '手机密码登录',
            iconText: 'el-icon-key'
          },
          {
            id: 2,
            title: '手机验证码登录',
            iconText: 'el-icon-mobile-phone'
          }
        ],
        loginDialogFormVisible: false,
        registerDialogFormVisible: false,
        btnLoginLoading: false,
        formLogin: {
          phone: '',
          password: '',
          code: '',
          nickName: '',
          phoneRegion: ''
        },
        englishLoginRule: {
          nickName: [
            {
              required: true,
              trigger: 'blur',
              message: 'Please enter your nickname. The length is 4 to 20'
            }
          ],
          phone: [
            {
              required: true,
              trigger: 'blur',
              message: 'Please enter your mobile phone number'
            },
            {
              validator: CheckRequiredUsername,
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: 'Please enter a password of 6-20 characters',
              trigger: 'blur',
              min: 6,
              max: 20
            }
          ],
          code: [
            {
              required: true,
              trigger: 'blur',
              message: 'Please enter a 4-digit verification code',
              min: 4,
              max: 4
            }
          ]
        },
        ruleLogin: {
          nickName: [
            {
              required: true,
              message: '请输入您的昵称，长度为4~20',
              trigger: 'blur',
              min: 4,
              max: 20
            }
          ],
          phone: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入手机号'
            },
            {
              validator: CheckRequiredUsername,
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '请输入6-20位的密码',
              trigger: 'blur',
              min: 6,
              max: 20
            }
          ],
          code: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入4位的验证码',
              min: 4,
              max: 4
            }
          ]
        },
        formLabelWidth: '70px',
        cities: [{
          value: '+86',
          label: '中国大陆'
        }, {
          value: '+852',
          label: '中国香港'
        }, {
          value: '+853',
          label: '中国澳门'
        }, {
          value: '+886',
          label: '中国台湾'
        }, {
          value: '+335',
          label: '阿尔巴尼亚'
        }, {
          value: '+1',
          label: '美国'
        }],
        value: "+86"
      }
    },
    methods: {
      mouseOver () {
        document.getElementById('down').style.display = 'none'
        document.getElementById('up').style.display = ''
        document.getElementById('ul-list').style.display = ''
      },
      mouseLeave () {
        document.getElementById('down').style.display = ''
        document.getElementById('up').style.display = 'none'
        document.getElementById('ul-list').style.display = 'none'
      },
      changeLangEvent () {
        if (this.$i18n.locale === 'zh-CN' && this.loginPhoneCodeMsg === '点击获取验证码') {
          this.$i18n.locale = 'en-US'
          this.language = 'English'
          this.loginPhoneCodeMsg = 'send'
        } else {
          this.$i18n.locale = 'zh-CN'
          this.language = '简体中文'
          this.loginPhoneCodeMsg = '点击获取验证码'
        }
      },
      async send (val) {
        this.formLogin.phoneRegion = this.value
        // this.$router.replace({ path: '/' })
        const data = await sendCode(this.formLogin)
        if (data.code === 200){
          this.$notify({
            title: '成功',
            message: data.errorMessage,
            type: 'success'
          });
        }else {
          this.$notify.error({
            title: '错误',
            message: data.errorMessage
          });
        }
        this.setTime(val);
      },
      setTime (val) {
        const that = this
        that.isTimeOut = 1
        if (val !== 0) {
          that.loginPhoneCodeMsg = val
          val--
          setTimeout(function () {
            that.setTime(val)
          }, 1000)
        } else {
          that.isTimeOut = 0
          if (this.$i18n.locale === 'zh-CN') {
            that.loginPhoneCodeMsg = 'send'
          } else {
            that.loginPhoneCodeMsg = '点击获取验证码'
          }
          return
        }
      },
      loginSubmit () {
        this.$refs.formLogin.validate(async (valid)=>{
          if (valid){
            const that = this;
            const data = await register(that.formLogin)
            if (data.code === 200){
              this.$notify({
                title: '成功',
                message: data.errorMessage,
                type: 'success'
              });
              this.$router.replace({ path: '/' })
            }else {
              this.$notify.error({
                title: '错误',
                message: data.errorMessage
              });
            }
          }
        })
      }
    },
    mounted () {

    }
  }
</script>


<style scoped>

  @media screen and (max-width: 1102px) {
    /deep/ .side {
      display: none !important;
    }

    /deep/ .main-wraper {
      margin-left: 0 !important;
      position: relative;
      height: 100%;
    }
  }

  .side {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 480px;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .logo {
    position: fixed;
    _position: absolute;
    top: 0;
    left: 0;
    background: url(../assets/pecLogov3.png) no-repeat;
    background-size: 60px 60px;
    background-image: -webkit-image-set(url(../assets/pecLogov3.png) 1x, url(../assets/pecLogov3.png) 2x);
    background-image: image-set("../assets/pecLogov3.png" 1x, "../assets/pecLogov3.png" 2x);
    z-index: 2;
    height: 70px;
    padding-left: 46px;
    margin-left: 30px;
    margin-top: 18px;
    font-size: 36px;
    display: block;
    color: #000;
    text-decoration: none;
  }

  .top {
    min-width: 560px;
    top: 0;
    left: 0;
    text-align: right;
    position: relative;
    z-index: 1;
  }

  .top .item {
    float: right;
    margin: 20px 40px 0 0;
    font-size: 16px;
    color: rgba(0, 0, 0, .902);
    padding: 10px 0 0;
    line-height: 24px;
  }

  .feedback {
    margin-right: 60px;
  }

  .top .language-entry {
    opacity: .6;
    color: #000;
  }

  .top .lianghao {
    padding: 0;
  }

  .top .lianghao .lianghao-entry {
    position: relative;
    display: block;
    float: right;
  }

  .top .lianghao .lianghao-detail {
    clear: both;
    width: 290px;
    border-radius: 6px;
    border: solid 1px #eee;
    background-color: #fff;
    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 12%);
    overflow: hidden;
    padding: 0;
  }

  .top .lianghao .lianghao-detail .upper {
    border-bottom: solid 1px #f0f0f0;
    height: 49px;
    position: relative;
  }

  .top .lianghao .lianghao-detail .upper {
    border-bottom: solid 1px #f0f0f0;
    height: 49px;
    position: relative;
  }

  .top .item > a {
    display: inline-block;
    color: #000;
  }

  .top .feedback a {
    color: #000;
    opacity: .6;
  }

  .top .language-entry > ul {
    list-style: none;
    text-align: left;
    padding-top: 8px;
  }

  .top .language-entry > ul li {
    padding-top: 16px;
  }

  .top .language-entry > ul li a {
    color: #888;
  }

  a {
    outline: 0;
    text-decoration: none;
    color: #359eff;
  }

  #ul-list {
    padding-left: 0;
    margin-top: 0;
  }

  html {
    font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  }

  .main-wraper {
    margin-left: 480px;
    position: relative;
    height: 100%;
  }

  .main {
    position: absolute;
    padding-bottom: 10px;
    top: 100px;
    width: 100%;
  }

  .main > .form {
    position: relative;
    margin: 0 auto;
    width: 480px;
  }

  .welcome {
    font-size: 44px;
    margin-bottom: 20px;
  }

  .header {
    font-size: 28px;
    margin-bottom: 64px;
    line-height: 1.2;
    color: #333;
  }

  /deep/ .el-input__inner {
    height: 52px !important;
  }

  /deep/ .el-button {
    line-height: 2 !important;
  }

  .submit {
    border: 1px #3083ff solid;
    border-radius: 4px;
    background-color: #3487ff;
    box-shadow: 0 5px 8px 0 rgb(24 95 255 / 10%);
    color: #fff;
    text-align: center;
    font-weight: lighter;
    background-image: linear-gradient(
      0deg, #398bff, #3083ff);
    width: 478px;
    height: 60px;
    margin: 40px 0 8px;
    font-size: 24px;
  }

</style>
